<template>
   <div>
   <div ref="charts" class="charts"></div>
   <a @click="setDate(7)">周</a><a @click="setDate(30)">月</a><a @click="setDate(400)">年</a>
   </div>
</template>

<script>
let Worker = require('worker-loader!./worker')
let worker = new Worker

export default {
  name: 'line-charts',
  props: {

  },
  data () {
    return {
      charts: null,
      allData: {
          'portfolioN': [],
          'benchmarkN': [],
          'xAxis': []
      },
      options: {
        title: {
            show: false
        },
        grid: {
            left: '2%',
            top: '5%',
            right: '5%',
            bottom: '0%',
            width: '95%',
            containLabel: true
        },
        legend: {
            data:['销量', 'ss'],
            show: false
        },
        xAxis: {
            show: true,
            data: ['1', '2', '3', '4', '5', '6'],
            axisPointer: {
              lineStyle: {
                color: 'rgba(255,255,255,0.35)'
              }
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            axisLabel: {
                show: false
            },
            axisPointer: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.35)'
                }
            },
            axisTick: false,
            axisLine: {
              lineStyle: {
                color: '#e9e9e9',
                opacity: 0.8,
                width: 2
              }
            }
        },
        yAxis: {
          show: true,
          type: 'value',
          splitNumber: 3,
          splitLine: {
            show: true,
            lineStyle:{
              type: 'dashed',
              color: '#e9e9e9',
              opacity: 0.5
            }
          },
          boundaryGap: false,
          axisLabel: {
              show: true
          },
          axisTick: false
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: 'line',
            backgroundColor: 'rgba(255, 255, 255, 0)',
            padding: [7, 6],
            textStyle: {
                color: '#999',
                fontSize: '0.67em'
            },
            // extraCssText: 'box-shadow: 0 1px 4px 0 rgba(0,0,0,0.19);border-radius: 8px;line-height: 1.6em;letter-spacing: 1px',
            formatter: (params) => {
                let str = `
                    <div class="charts_tooltip">
                        <div class="data"><div style="background: ${params[0].color}" class="pointer"></div><div class="key">${params[0].seriesName}</div><div style="color: ${params[0].color}" class="value">${params[0].data}</div></div>
                        <div class="data"><div style="background: ${params[1].color}" class="pointer"></div><div class="key">${params[1].seriesName}</div><div style="color: ${params[1].color}" class="value">${params[1].data}</div></div>
                    </div>
                    <div class="charts_date">
                        ${params[0].axisValue}
                    </div>
                `
                return str
            }
        },        
        series: [{
            name: '本组合收益(%)',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20],
            lineStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowOffsetY: 1,
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    sampling: 'average' // 折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率
                }
            },
            smooth: true
        },
        {
            name: '纳斯达克综合指数(%)',
            type: 'line',
            data: [6, 34, 65, 12, 10, 20],
            lineStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowOffsetY: 1,
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    sampling: 'average' // 折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率
                }
            },
            smooth: true
        }]
      }
    }
  },
  watch: {

  },
  methods: {
    initCharts (data) {
      let isReady = [false, false]
      worker.postMessage(
        {
          'id'  : 'portfolioN',
          'data': data.data.portfolioN
        }
      )
      worker.postMessage(
        {
          'id'  : 'benchmarkN',
          'data': data.data.benchmarkN
        }
      )
      worker.onmessage = (e) => {
          if (e.data.id === 'portfolioN') {
              isReady[0] = true
              this.options.series[0].data = e.data.data
              this.allData.portfolioN = e.data.data
              if (isReady[1]) this.charts.setOption(this.options)
          } else {
              isReady[1] = true
              this.options.series[1].data = e.data.data
              this.allData.benchmarkN = e.data.data
              if (isReady[0]) this.charts.setOption(this.options)
          }
      }
    },
    setDate (param) {
      this.options.series[0].data = this.allData.portfolioN.slice(0, param)
      this.options.series[1].data = this.allData.benchmarkN.slice(0, param)
      this.options.xAxis.data = this.allData.xAxis.slice(0, param)
      this.charts.setOption(this.options)
    }
  },
  mounted () {
    this.charts = echarts.init(this.$refs.charts, 'wonderland')
    this.baseService.get('strategy/detail?s=it_ITALL_timing_opt_20').then((res) => {
      this.options.xAxis.data = res.data.date
      this.allData.xAxis = res.data.date
      this.initCharts(res)
    })
  },
  created () {

  }
}
</script>

<style lang="less" scoped>
.charts {
    width: 100%;
    height: 200px;
}
</style>

<style lang="less">
.charts_tooltip {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.19);
    border-radius: 8px;
    line-height: 1.6em;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.5);
    padding: 7px 6px;
    display: flex;
    flex-direction: column;
    .data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .pointer {
            height: 0.75em;
            width: 0.75em;
            margin-right: 5px;
            border-radius: 50%;
        }
        .key {
            flex: 2;
            display: flex;
        }
        .value {
            flex: 2;
            display: flex;
            justify-content: flex-end;
            padding-left: 5px;
        }

    }
}
.charts_date {
    background: rgba(255,255,255,0.80);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.19);
    border-radius: 3px;
    line-height: 1.6em;
    letter-spacing: 1px;
    padding: 0px;
    flex-direction: column;
    width: 45%;
    margin-top: 5px;
    display: inline-flex;
    float: right;
    justify-content: center;
    align-items: center;
    font-size: 0.83em;
}
</style>
